符号样式#

这些修饰符用于配置 SF Symbols（系统符号图标）的显示样式和动画效果，常用于 <Image systemName="..."> 组件。

symbolRenderingMode#

设置符号图像的 渲染模式。

类型#

1symbolRenderingMode?: SymbolRenderingMode

可选值（SymbolRenderingMode）：#

• "monochrome"：单色模式，使用当前前景色绘制
• "hierarchical"：层次渲染，根据不同图层设置不透明度（适合语义着色）
• "multicolor"：使用符号内置颜色
• "palette"：分层渲染，可自定义每一层的颜色样式（需搭配 foregroundStyle）

示例#

1<Image
2  systemName="star.fill"
3  symbolRenderingMode="palette"
4  foregroundStyle={{
5    primary: "red",
6    secondary: "orange",
7    tertiary: "yellow"
8  }}
9/>

foregroundStyle#

设置符号或前景元素的颜色样式。

类型#

1foregroundStyle?: 
2  | ShapeStyle
3  | DynamicShapeStyle
4  | {
5      primary: ShapeStyle | DynamicShapeStyle
6      secondary: ShapeStyle | DynamicShapeStyle
7      tertiary?: ShapeStyle | DynamicShapeStyle
8    }

说明：#

• 在 "monochrome" 模式下使用单个颜色或渐变；
• 在 "palette" 模式下使用 { primary, secondary, tertiary } 对象指定多层样式；
• tertiary 可选，仅在符号有三层图层时有效。

symbolVariant#

为符号添加特定的 视觉变体。

类型#

1symbolVariant?: SymbolVariants

可选值（SymbolVariants）：#

• "none"：无变体，原始符号样式
• "fill"：填充样式
• "circle"：包裹在圆形轮廓中
• "square"：包裹在方形轮廓中
• "rectangle"：包裹在矩形轮廓中
• "slash"：斜杠样式，表示禁止/关闭等状态

示例#

1<Image
2  systemName="wifi"
3  symbolVariant="slash"
4/>

symbolEffect#

为符号添加 动画效果，支持静态应用或绑定数值以触发动画。

类型#

1symbolEffect?: SymbolEffect

使用方式：#

1. 静态符号效果（SymbolEffect 简写字符串）#

1<Image
2  systemName="checkmark"
3  symbolEffect="scaleUp"
4/>

2. 动态绑定符号效果（每次值变化时触发动画）#

1<Image
2  systemName="heart"
3  symbolEffect={{
4    effect: "bounce",
5    value: isLiked
6  }}
7/>

每次 isLiked 状态变化时，图标会执行 bounce 动画。

可用 Symbol 动效分类（DiscreteSymbolEffect）#

综合示例#

1<Image
2  systemName="bell.fill"
3  symbolRenderingMode="hierarchical"
4  symbolVariant="circle"
5  foregroundStyle="indigo"
6  symbolEffect={{
7    effect: "breathePulse",
8    value: isNotified
9  }}
10/>

上述示例中：

• 使用了分层渲染（hierarchical）；
• 添加了圆形变体（circle）；
• 设置了 indigo 颜色；
• 每当 isNotified 变化时，符号执行 breathePulse 动画。

修饰符汇总表#